<template>
  <div>
    <query-page
      ref="queryPageRef"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderDataLeft"
      :total="totalLeft"
      height="calc(100vh - 258px)"
      @query-data="getLeftData"
    >
      <template #container-side>
        <a-button
          v-permission="['pms:receive:save']"
          type="primary"
          @click="addLeft"
          >新增</a-button
        >
        <!-- <a-button type="primary" @click="editLeft">编辑</a-button>
        <a-button type="primary" @click="deleteLeft">删除</a-button>
        <a-button type="primary" @click="arrivalConfirmation"
          >到货确认</a-button
        > -->
        <!-- <a-button type="primary" @click="refreshLeft">刷新</a-button> -->
      </template>
      <template #operate="{ record, rowIndex }">
        <a-button type="text" @click="detailLeft(record, rowIndex)"
          >详情</a-button
        >
        <a-button
          v-permission="['pms:receive:update']"
          type="text"
          @click="editLeft(record, rowIndex)"
          >编辑</a-button
        >
        <a-button
          v-permission="['pms:receive:delete']"
          type="text"
          @click="deleteLeft(record, rowIndex)"
          >删除</a-button
        >
      </template>
    </query-page>
  </div>
  <AddArrivalModel
    v-if="addArrivalModelVisible"
    v-model="addArrivalModelVisible"
    :select-id="selectArrivalId"
    @fetch-data="getLeftData"
  ></AddArrivalModel>
  <DetailModal
    v-if="detailModelVisible"
    v-model="detailModelVisible"
    :select-id="selectArrivalId"
  ></DetailModal>
</template>

<script lang="ts" setup>
  import { computed, defineAsyncComponent, provide, reactive, ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { Message } from '@arco-design/web-vue';
  import { info } from '@/common/utils/modal-promise';
  // import AddSupplierModel from './AddSupplierModel.vue';
  // import AddArrivalModel from './AddArrivalModel.vue';
  import { hasDataAndBack } from '@/common/utils';
  import {
    getPmsReceivePage,
    deletePmsReceive,
  } from '@/api/purchaseArrival/arrivalRegistration';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  // 异步加载组件
  const AddArrivalModel = defineAsyncComponent(
    () => import('./AddArrivalModel.vue')
  );
  const DetailModal = defineAsyncComponent(() => import('./DetailModal.vue'));

  // 当前页面要渲染的查询条件
  const formRenderKeys = ['mdsVendorCode2', 'dataSourceType'];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'index',
    'secretLevel',
    'billNo',
    'mdsVendorId',
    'mdsVendorName',
    'editDate',
    'pmsArriveDate',
    'operate200',
  ];

  const queryPageRef = ref(null);
  const isLoading = ref(true);
  const selectedKeys = ref([]);
  // left-list
  const renderDataLeft = ref<any[]>([]);
  const totalLeft = ref<number>(0);
  const selectArrivalId = ref<string | number | null>(null);
  let selectRow = reactive({});
  provide(
    'pmsReceiveRow',
    computed(() => {
      return selectRow;
    })
  );
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const getLeftData = async (queryInfo: object | undefined) => {
    if (!queryInfo) {
      queryInfo = queryPageRef.value.getStatus();
    }
    try {
      renderDataLeft.value = [];
      isLoading.value = true;
      const { data } = await getPmsReceivePage(queryInfo);
      renderDataLeft.value = data.list;
      totalLeft.value = data.total;
      if (
        hasDataAndBack(
          renderDataLeft.value,
          totalLeft.value,
          queryPageRef.value?.getStatus().pageNo
        )
      ) {
        queryPageRef.value?.setCurrent(
          queryPageRef.value.getStatus().pageNo - 1
        );
        getLeftData();
      }
    } finally {
      isLoading.value = false;
    }
  };
  const addArrivalModelVisible = ref(false);
  const detailModelVisible = ref(false);
  const addLeft = () => {
    selectArrivalId.value = null;
    addArrivalModelVisible.value = true;
  };
  const editLeft = (row) => {
    selectArrivalId.value = row.id;
    addArrivalModelVisible.value = true;
  };
  const detailLeft = (row) => {
    selectArrivalId.value = row.id;
    selectRow = Object.assign(selectRow, row);
    detailModelVisible.value = true;
  };
  const deleteLeft = async (row) => {
    await info({
      title: '删除确认',
      content: '您确定要删除当前所选的数据？',
      okText: '确认',
    });
    const { id } = row;
    await deletePmsReceive(id);
    Message.success({
      content: '删除成功！',
      duration: 5 * 1000,
    });
    getLeftData();
  };
  const init = () => {
    // getData();
  };
  init();
  defineExpose({ getLeftData });
</script>

<style lang="less" scoped>
  @import url('../moduleCommon/common.less');

  .bottom-list {
    padding: 20px;
  }
</style>
